<template>
  <div class="icon-item" :draggable="true" @dragstart="onDragStart">
    <img :src="icon.src" :alt="icon.name" />
    <span>{{ icon.name }}</span>
  </div>
</template>

<script>
export default {
  name: 'IconItem',
  props: {
    icon: Object
  },
  methods: {
    onDragStart(event) {
      // 设置拖拽的数据
      event.dataTransfer.setData('icon', JSON.stringify(this.icon));
      // 防止事件继续传播
      event.stopPropagation();
    }
  }
};
</script>

<style scoped>
.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  cursor: grab;
}

.icon-item img {
  width: 50px;
  height: 50px;
  cursor: pointer; /* 鼠标悬浮在图片上时显示小手 */
}

.icon-item span {
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
}
</style>
